<template>
	<view>
		<!-- 		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="userinfo u-flex-1" @click="getUserInfo">
				<view class="img-container">
					<image class="uimage" :src='avatarUrl'></image>
				</view>
				<u-divider>{{nickName}}</u-divider>
			</view>
		</view> -->
		<view>
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="uimage" :src="avatarUrl"></image>
			</button>
			<input id="nickname-input" type="nickname" style="text-align: center;" class="weui-input"
				placeholder="请输入昵称" v-model="nickName" @blur="onNickName" />
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<!-- <u-cell-item icon="star" title="我的收藏"></u-cell-item> -->
				<u-cell-item icon="list" title="我的订单" @click="toOrderHistory"></u-cell-item>
				<u-cell-item icon="map" title="我的地址" @click="toMyAddress"></u-cell-item>
			</u-cell-group>
		</view>

	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		computed,
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		uploadImageApi,
		saveOrUpdateApi
	} from '../../api/user.js'
	import {
		userStore
	} from '../../store/user.js'
	import http from '../../common/http.js';

	const ustore = userStore()
	const nickName = computed(() => {
		if (ustore.nickName) {
			return ustore.nickName
		} else {
			return '微信用户'
		}
	})
	//const avatarUrl = ref('/static/logo.png')
	const avatarUrl = computed(() => {
		if (ustore.avatarUrl) {
			return http.baseUrl + ustore.avatarUrl
		} else {
			return '/static/logo.png'
		}
	})
	const instance = getCurrentInstance();

	const onChooseAvatar = async (e) => {
		console.log(e)
		avatarUrl.value = e.detail.avatarUrl

		uploadImageApi({
			url: "/api/upload/uploadImage",
			filePath: e.detail.avatarUrl
		}).then((res) => {

			console.log(res)
			let result = JSON.parse(res)
			saveOrUpdateApi({
				openid: uni.getStorageSync('openid'),

				avatarUrl: result.data
			}).then(res => {
				console.log(res)
				ustore.avatarUrl = result.data
			})
		})
	}

	const onNickName = (e) => {
		console.log(e)
		uni.createSelectorQuery().in(instance)
			.select("#nickname-input")
			.fields({
				properties: ["value"],
			})
			.exec((res) => {
				console.log(res)
				nickName.value = res?.[0]?.value
				console.log('昵称：', nickName.value)

				saveOrUpdateApi({
					openid: uni.getStorageSync('openid'),
					nickName: res?.[0]?.value
				}).then(res => {
					console.log("上传：")
					console.log(res)
					ustore.nickName = res?.[0]?.value
				})
			})
	}

	const getUserInfo = () => {
		console.log('获取头像')
		if (uni.getStorageSync('avatarUrl') && uni.getStorageSync('nickName')) {
			nickName.value = uni.getStorageSync('nickName')
			avatarUrl.value = uni.getStorageSync('avatarUrl')
		} else {
			uni.getUserProfile({
				desc: '用于头像昵称展示 ',
				success: (res) => {
					console.log(res)
					nickName.value = res.userInfo.nickName
					avatarUrl.value = res.userInfo.avatarUrl
					uni.setStorageSync('avatarUrl', res.userInfo.avatarUrl);
					uni.setStorageSync('nickName', res.userInfo.nickName);
				}
			})
		}
	}

	const toOrderHistory = () => {
		//getUserInfo()
		uni.navigateTo({
			url: '../order/order'
		})
	}
	
	const toMyAddress = () => {
		//getUserInfo()
		uni.navigateTo({
			url: '../addresslist/addresslist'
		})
	}

	onShow(() => {
		//getUserInfo()
	})
</script>

<style lang="scss">
	page {
		background-color: #ededed;
	}

	.userinfo {
		margin: 30rpx 0rpx;
	}

	.img-container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.uimage {
		height: 50px;
		width: 50px;
		border-radius: 50%;
		margin: 5px 0px;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}
</style>